import { _decorator, Component, v2, v3, Node, Vec2, UITransform, Camera, CCInteger, EventTouch, input, Input, Vec3, view, math, Canvas, find, screen } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('Joystick')
export class Joystick extends Component {

    @property(Node)
    private center: Node;

    @property(CCInteger)
    private maxR: number = 60;

    @property(Camera)
    private uiCamera: Camera = null;

    public dir: Vec2 = v2(0, 0);

    private transform: UITransform = null;

    private parentTransform: UITransform = null;

    // 用于获取可视区域尺寸
    // private viewSize: math.Size = null;
    // private devicePixelRatio: number = null;
    // private actualWidth: number = null;

    // 通过场景的UITransform获取设计分辨率
    // private canvasUITransform: UITransform = null;
    private designSizeWidth: number = 1280;
    private designSizeHeight: number = 720;


    public onLoad(): void {
        this.transform = this.node.getComponent(UITransform);
        // 获取Joystick节点的父节点UIRoot的UITransform组件用于将屏幕获取世界坐标转换到UIRoot节点下的坐标
        this.parentTransform = this.node.parent.getComponent(UITransform);
        // this.center.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
        // this.center.on(Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this);
        // this.center.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        // this.center.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
        input.on(Input.EventType.TOUCH_START, this.onTouchStart, this);
        input.on(Input.EventType.TOUCH_MOVE, this.onTouchMove, this);
        input.on(Input.EventType.TOUCH_CANCEL, this.onTouchEnd, this);
        input.on(Input.EventType.TOUCH_END, this.onTouchEnd, this);

        // 首次加载就优先获取可视区域尺寸
        // this.viewSize = view.getVisibleSize();
        // 获取设备像素比
        // this.devicePixelRatio = screen.devicePixelRatio;
        // this.actualWidth = this.viewSize.width / this.devicePixelRatio;
        // 获取场景的Canvas
        // this.canvasUITransform = find("Canvas").getComponent(Canvas).getComponent(UITransform);
        // 获取场景的设计分辨率
        // this.designSizeWidth = this.canvasUITransform.width;
        // this.designSizeHeight = this.canvasUITransform.height;

    }

    private onTouchStart(e: EventTouch) {
        //获取点击到的屏幕位置
        var clickPos: Vec2 = e.getLocation();
        // console.log("设计分辨率宽：" + this.designSizeWidth);
        // console.log("获取到的点击屏幕的触点位置" + clickPos);
        //摄像机， 通过UI相机显示，所以在UI相机节点下将点击到的屏幕坐标转换成世界坐标
        var wPos = this.uiCamera.screenToWorld(v3(clickPos.x, clickPos.y, 0))
        // console.log("获取到点击屏幕位置的世界坐标" + wPos);
        //将点击屏幕位置的世界坐标转化成UIRoot的节点下（局部）空间坐标系坐标，需要获取UIRoot的Transform
        //将一个 UI 节点世界坐标系下点转换到另一个 UI 节点 (局部) 空间坐标系，这个坐标系以锚点为原点。
        var Joypos = this.parentTransform.convertToNodeSpaceAR(wPos);
        // console.log("获取到的UIRoot坐标系下位置：" + Joypos);
        // 当点击位置在左半边才生成移动摇杆，通过UIRoot坐标系下坐标和设计分辨率宽的一半比较
        // 因为不管不同分辨率设备点击屏幕位置坐标差异如何，不同分辨率设备相机显示影响世界坐标不同，最后转换到UIRoot节点下的坐标都是一致的。
        if (Joypos.x < this.designSizeWidth / 2) {
            this.node.setPosition(Joypos);
        }
        this.dir.x = this.dir.y = 0;

        // // 获取到点击屏幕位置的世界坐标，基于屏幕左下角坐标系为原点
        // let clickPos = new Vec2();
        // clickPos = e.getUILocation();
        // // 将世界坐标转化到节点坐标
        // let Joypos = new Vec3();
        // Joypos = this.parentTransform.convertToNodeSpaceAR(v3(clickPos.x, clickPos.y, 0));


    }
    private onTouchMove(e: EventTouch) {
        //获取触摸事件移动到的屏幕位置 
        var screenPos: Vec2 = e.getLocation();
        //摄像机， 通过UI相机显示，所以在UI相机节点下将触摸事件移动到的屏幕坐标转换成世界坐标
        var wPos = this.uiCamera.screenToWorld(v3(screenPos.x, screenPos.y, 0));
        //将触摸事件移动到的世界坐标转化成Joystick的节点下（局部）空间坐标系坐标，需要获取Joystick的Transform
        //将一个 UI 节点世界坐标系下点转换到另一个 UI 节点 (局部) 空间坐标系，这个坐标系以锚点为原点。
        var pos = this.transform.convertToNodeSpaceAR(wPos);

        // 将触摸事件移动到的世界坐标转换成获取UIRoot节点坐标系下的坐标用来判断生效移动摇杆功能
        var Joypos = this.parentTransform.convertToNodeSpaceAR(wPos);

        // 当点击位置在左半边才生效移动摇杆功能，通过UIRoot节点坐标系下坐标和设计分辨率宽的一半比较
        // 因为不管不同分辨率设备点击屏幕位置坐标差异如何，不同分辨率设备相机显示影响世界坐标不同，最后转换到UIRoot节点下的坐标都是一致的。
        if (Joypos.x < this.designSizeWidth / 2) {
            //将屏幕坐标转化为Center所在节点坐标系下的坐标，即父节点父节点Joystick坐标系下的坐标，即pos
            //转换坐标过程中，pos.z可能不为0，UI摄像机是正交摄像机所以没影响，2d游戏所以把三维坐标pos中的z轴设置为0
            pos.z = 0;
            //最终设置摇杆Center的坐标，这样就实现了触摸移动时在UI相机下的屏幕坐标最终转换成摇杆center在父节点Joystick坐标系下的坐标
            //实现摇杆跟随手指移动。
            //将摇杆中心限制在摇杆背景圆里，所以要设置最大半径
            var len = pos.length();
            if (len > this.maxR) {
                pos.x = pos.x * this.maxR / len;
                pos.y = pos.y * this.maxR / len;
                //注意限制后，记得把len同步改为maxR用于后续计算单位向量
                len = this.maxR;
            }
            //要给用户方向向量，要给单位向量即方向dir
            this.dir.x = pos.x / len; // cos(邻边比斜边，余弦角度)
            this.dir.y = pos.y / len; // sin(对边比斜边，正弦角度)
            this.center.setPosition(pos);
        }

    }
    private onTouchEnd(e) {
        this.dir.x = this.dir.y = 0;
        this.center.setPosition(0, 0);
        this.node.setPosition(120, 110);
    }
}


